<template>
		<div class="navigator-wrap" v-if="!isSharePage" >
			<div id="navigator" :class="['nav',{'nav--background':!transparent ,'nav-background-fix':backgroundFix}]"
			:style="{height: navHeight, paddingTop: paddingTop}">
				<span v-text="leftText" @click.stop.prevent="handleBack" :class="showLeftArrow ? 'nav-left iconfont icon-back-new':'nav-left'"></span>
				<div class="nav-center">
					<slot name="nav-center">
						<span v-text="navTitle"></span>
					</slot>
				</div>
				<div class="nav-right">
					<slot name="nav-right">
						<y-button class="iconfont icon-share-new" @click.native="share" type="text"></y-button>
					</slot>
				</div>
			</div>
			<div class="pdTop" :class="{ pdTopX: $utils.isIphoneX()}"></div>
		</div>
	</template>
	<script>
	let entryComponents = [];
	import YButton from '../button';
	export default {
		components: {
			YButton
		},
		name: 'y-nav',
		props: {
			showLeftArrow: {
				type: Boolean,
				default: true
			},
			title: String,
			leftText: String,
			beforeBack: Function,
			transparent: Boolean,
			menuData: Array,
			goBack: Function,
			shareData: Object,
		},
		data() {
			return {
				backgroundFix: false,
				navTitle: this.title,
				menuOptions: null,
				backClicked: false,
				statuBarHeight: 0,
			}
		},
		watch: {
			title() {
				this.navTitle = this.title;
				// this.navTitle = this.title.length > 10 ?  this.title.substring(0, 10) + '...' : this.title
			},
			// 监听menuData数据变化，当数据length为0时，隐藏相关按钮  => by yefan
			menuData(newVal) {
				if (newVal && newVal.length > 0) {
					this.menuOptions = {
						trigger: this.$refs.nav_menu,
						fixed: true
					}
				} else {
					this.menuOptions = false;
				}
			}
		},
		computed: {
			isSharePage() {
				// return this.$utils.isWeixin();
				return !this.$route.meta.disableForward && !this.$yryz.isNative() && this.$utils.NODE_ENV !== "development"
			},
			devType() { // 机型
				let devType = this.$env.devType;
				if (devType === 0) {
					return 'Andriod';
				} else if (devType === 1) {
					return 'iOS ';
				} else {
					return 'PC';
				}
			},
			navHeight() {
				return `${this.statuBarHeight / 100 + 1.2}rem`;
			},
			paddingTop() {
				return `${this.statuBarHeight / 100 + 0.3}rem`;
			}
		},
		methods: {
			resetEntry() {
				entryComponents = [];
			},
			resetEntryIsEntry() {
				if (entryComponents.length === 0)
					return;
				if (entryComponents[entryComponents.length - 1] === this.$route.matched[entryComponents.length - 1].components.default)
					entryComponents = [];
			},
			handleBack() {
				if (this.goBack) {
					this.goBack();
					return;
				}
				this.$router.back();
			},
			
			handleScroll() {
				var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
				if (scrollTop >= 50) {
					this.backgroundFix = true;
					this.navTitle = this.title || this.$circle.circleName
				} else {
					this.backgroundFix = false;
					this.navTitle = this.title
				}
			},
			setEntryEmpty() {
				entryComponents = [];
			},
			share() {
				this.$yryz.share(this.shareData)
			}
		},
		mounted() {
			// this.$yryz.on('nativeBack', this.handleBack);
			this.transparent && window.addEventListener('scroll', this.handleScroll);
			if (this.menuData)
				this.menuOptions = {
					trigger: this.$refs.nav_menu,
					fixed: true
				}
			this.$eventBus.$on('goBack', this.handleBack);
		},
		activated() {
			// this.$yryz.on('nativeBack', this.handleBack);
			this.backClicked = false;
		},
		deactivated() {
			// this.$yryz.off('nativeBack', this.handleBack);
			this.$eventBus.$off('goBack', this.handleBack);
		},
		beforeDestroy() {
			// this.$yryz.off('nativeBack', this.handleBack);
			this.$eventBus.$off('goBack', this.handleBack);
			this.transparent && window.removeEventListener('scroll', this.handleScroll);
		},
		async created() {
			if (!entryComponents.length && this.$route.matched.length && this.$route.matched.path !== '/empty') {
				for (let matched of this.$route.matched) {
					entryComponents.push(matched.components.default);
				}
			};
			this.statuBarHeight = await this.$yryz.statusBarHeight();
		}
	}
	</script>
	<style>
	@import '../../css/var.css';
	.pdTop {
		padding-top: 1.28rem;
	}
	.pdTopX {
		padding-top: 1.8rem;
	}
	.nav {
		display: flex;
		height: 1.3rem;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		font-size: .36rem;
		color: #fff;
		z-index: 20;
		line-height: .88rem;
		padding-top: .56rem;
		padding-left: .2rem;
		padding-right: .2rem;
		& .iconfont {
			width: .6rem;
			color: #fff;
			font-size: 0.3rem;
			&.button {
				width: .6rem;
			}
		}
		& .button {
			height: .88rem;
			line-height: .88rem;
			padding: 0;
			border-radius: 0;
			float: right;
			&:active {
				background: none;
			}
			&:first-child {
				margin-left: 0.2rem;
			}
		}
		
		& .icon-share-new {
			font-size: 0.4rem;
			font-weight: 600;
		}
	}
	.padTopX {
		padding: 0.8rem .2rem 0;
		height: 1.8rem;
	}
	.nav--background {
		background: #fff;
		color: var(--text-secondary-color);
		border-bottom: 1px solid #e3e3e3;
	}
	.nav-left,
	.nav-right {
		flex: 0 0 auto;
	}
	.nav-left {
		text-align: left;
		font-size: var(--default-font-size);
	}
	.nav-right {
		text-align: right;
		min-width: .6rem;
	}
	.nav-center {
		@apply --text-cut;
		text-align: center;
		flex: 1;
		color: var(--text-secondary-color);
	}
	.nav.nav--background .iconfont {
		color: var(--text-secondary-color);
	}
	.nav .menu-item .iconfont {
		color: #fff;
	}
	
	.nav-background-fix {
		background: var(--theme-color);
		&.nav--background {
			color: #fff;
		}
		& .iconfont {
			color: #fff;
		}
	}
	.nav .iconfont {
		display: inline-block;
	}
	.nav-right .nav-right {
		float: right;
	}
	.nav-left .button.button--text {
		color: var(--text-secondary-color);
		font-size: var(--default-font-size);
	}
	.navigator-wrap {
		&.iPhoneX {
			& .nav {
				height: 1.68rem;
				padding-top: .8rem;
			}
			& .pdTop {
				padding-top: 1.68rem;
			}
		}
	}
	</style>